<template>
	<view class="addTask">
		<view class="top">
			<view class="com df" @click="show = true">
				<view class="tt">
					任务类型：
				</view>
				<view class="type df">
					<view class="text">
						{{form.type.farmOperatorName}}
					</view>
					<view class="image">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="com df" v-if="form.type.whetherVariableInput == 1"  @click="picker.show = true">
				<view class="tt" >选择投入品：</view>
				<view class="type df">
					<view class="text">
						{{form2.type}}
					</view>
					<view class="image">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- <view class="com df" v-if="form.type.whetherVariableInput == 1">
				<view class="tt">
					投入量：
				</view>
				<view class="type df">
					<view class="text input">
						<u--input border="surround" type="number" v-model="formData.number"></u--input>
					</view>
					<view class="image" style="color: #1D1D1D;">g</view>
				</view>
			</view> -->
			<view class="com df" style="border: 0;">
				<view class="tt">
					该任务已完成次数：
				</view>
				<view class="type df" style="color: #1D1D1D;">
					{{complateCount}} 次
				</view>
			</view>
		</view>
		<view class="btn" @click="dispatch">下发任务</view>
		<u-picker :show="show" :columns="columns" keyName="farmOperatorName" :closeOnClickOverlay="true" @cancel="show = false" @confirm="confirmType"></u-picker>
		<u-picker :show="picker.show" :columns="picker.option" keyName="variableInputName" :closeOnClickOverlay="true" @cancel="picker.show = false" @confirm="pickerComfirm"></u-picker>
	</view>
</template>

<script>
	import {
		findFarmByVarietyId,
		allVariableInputDetail,
		findTaskNumberByTaskType,
		addTask,
		} from "@/api/api.js"
	export default {
		data() {
			return {
				form: {
					type: '',
				},
				form2:{
					type:"氮",
				},
				complateCount:2,
				formData:{
					eventType:'',
					usingType:'',
					number:0,
				},
				show: false,
				picker:{
					show:false,
					option:[
						[
							{
								label:'氮',
								id:33
							},
							{
								label:'磷',
								id:34
							},
							{
								label:'钾',
								id:35
							},
						]
					]
				},
				columns: [
					[]
				],
				VarietyId:{},
				landMsgId:'',
				landId:'',
			}
		},
		watch: {
			"form.type"(newValue, oldValue) {
				if(newValue.whetherVariableInput == 1){
					this.allVariableInputDetail()
				}
				this.findTaskNumberByTaskType()
			}
		},
		onLoad(option) {
			console.log(option);
			this.VarietyId = option.VarietyId
			this.landMsgId = option.landMsgId
			this.landId = option.landId
			this.getTaskType()
		},
		methods: {
			async findTaskNumberByTaskType(){
				let query = `landMsgId=${this.landMsgId}&taskType=${this.form.type.farmOperatorName}`
				let res = await findTaskNumberByTaskType(query)
				console.log('当前地块任务类型次数：',res);
				if(res?.data.code == 200){
					this.complateCount = res.data.data.data
				}else{
					uni.$u.toast("获取任务次数失败")
				}
			},
			async allVariableInputDetail(){
				let res = await allVariableInputDetail()
				console.log('投入品',res);
				if(res?.data.code == 200){
					this.picker.option[0] = res.data.data.rows
					this.form2.type = this.picker.option[0][0].variableInputName
				}else{
					uni.$u.toast('获取投入品失败')
				}
			},
			async getTaskType(){
				let query = `varietyId=${this.VarietyId}`
				console.log(query);
				const res = await findFarmByVarietyId(query)
				console.log("根据品种获取的任务:",res);
				if(res?.data.code == 200){
					this.columns[0] = res.data.data
					this.form.type = this.columns[0][0]
				}else{
					uni.$u.toast("获取任务类型失败")
				}
			},
			async addTask(){
				uni.showLoading({
					mask:true,
					title:""
				})
				let params = {
					landMsgId:this.landMsgId,
					taskType:this.formData.eventType,
					variableInput:this.formData.usingType,
					// input:this.formData.number
				}
				console.log(params,'!!!!');
				const res = await addTask(params)
				console.log('下发任务请求：',res);
				if(res?.data.code == 200){
					uni.hideLoading()
					uni.showToast({
						icon:'success',
						duration:1000,
						title:'下发成功',
						success: () => {
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/user/farm?landId='+this.landId
								})
							},1000)
						}
					})
				}else{
					uni.hideLoading()
					uni.$u.toast(res.data.msg)
				}
				
			},
			dispatch(){
				console.log('点击了下发任务');
				if(!this.formData.eventType){
					this.formData.eventType = this.form.type.farmOperatorName
				}
				if(!this.formData.usingType && this.form.type.whetherVariableInput == 1){
					this.formData.usingType = this.form2.type
					console.log();
				}
				// if(this.formData.number<1 && this.form.type.whetherVariableInput == 1){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'选择投入量太少了',
				// 	})
				// 	return
				// }
				this.addTask()
			},
			confirmType(i) {
				this.form.type = i.value[0]
				this.formData.eventType = this.form.type.farmOperatorName
				this.show = false
			},
			pickerComfirm(i){
				this.form2.type = i.value[0].variableInputName
				this.formData.usingType = this.form2.type
				this.picker.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addTask {
		.df {
			display: flex;
		}

		.top {
			width: 690rpx;
			// height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 0 30rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.12);

			.com {
				justify-content: space-between;
				font-size: 30rpx;
				height: 30rpx;
				padding: 30rpx 0;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

				.tt {
					color: rgba(68, 78, 104, 0.7);
				}

				.type {
					color: #17CC77;

					.text {
						margin-right: 18rpx;
					}

					.input {
						margin-top: -20rpx;
						width: 180rpx;
					}

					.image {
						width: 12rpx;
						height: 22rpx;

						image {
							margin-top: 10rpx;
							width: 12rpx;
							height: 22rpx;
						}
					}
				}
			}
		}

		.btn {
			position: absolute;
			bottom: 91rpx;
			left: 50%;
			margin-left: -140rpx;
			width: 280rpx;
			height: 84rpx;
			background: #1BC46D;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
			border-radius: 12rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 84rpx;
		}
	}
</style>